<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>用户审核统计</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>用户审核统计</h5>
                    </div>
                    <div class="ibox-content">
                        <hr> 
                          <div class="form-group"> 
                                <input placeholder="开始日期" class="form-control layer-date" id="start">
                                <input placeholder="结束日期" class="form-control layer-date" id="end">
                                <button type="button" id="select" class="btn btn-info"style="margin-top: 10px;height: 30px;width: 64px;"> 搜索 </button>
                           </div> 
                        <div class="row row-lg">
		                    <div class="col-sm-12">
		                     
		                        <!-- Example Card View -->
		                        <div class="example-wrap">
		                            <div class="example">
		                            	<table id="table_list"></table>
		                            </div>
		                        </div>
		                        <!-- End Example Card View -->
		                    </div>
	                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>
    <!-- Page-Level Scripts -->
    <script>
         $(function () { 
		    //1.初始化Table
		    var oTable = new TableInit();
		    oTable.Init(); 
		});
    
    var TableInit = function () {
       var oTableInit = new Object();
       $('#table_list').bootstrapTable('destroy');
       oTableInit.Init = function () {
        	//初始化表格,动态从服务器加载数据  
			$("#table_list").bootstrapTable({
			    //使用get请求到服务器获取数据  
			    method: "POST",
			    //必须设置，不然request.getParameter获取不到请求参数
			    contentType: "application/x-www-form-urlencoded",
			    //获取数据的Servlet地址  
			    url: "${ctx!}/report/content/examine/user/count",
			    //表格显示条纹  
			    striped: true,
			    //启动分页  
			    pagination: false,
			    //每页显示的记录数  
			    pageSize: 10,
			    //当前第几页  
			    pageNumber: 1,
			    //记录数可选列表  
			    pageList: [5, 10, 15, 20, 25],
			    //是否启用查询  
			    search: false,
			    //是否启用详细信息视图
			    //detailView:true,
			    //detailFormatter:detailFormatter,
			    //表示服务端请求  
			    sidePagination: "server",
			    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			    //设置为limit可以获取limit, offset, search, sort, order  
			    queryParamsType: "undefined",
			    queryParams: oTableInit.queryParams,
			    //json数据解析
			    responseHandler: function(res) {
			        return {
			            "rows": res,
			            //"total": res.totalElements
			        };
			    },
			    //数据列
			    columns: [{
			        title: "用户名",
			        field: "userName"
			    },{
			        title: "通过数",
			        field: "passCount"
			    },{
			        title: "不通过数",
			        field: "refuseCount"
			         
			    },{
			        title: "通过比例",
			        field: "passRate"
			    },{
			        title: "不通过比例",
			        field: "refuseRate"
			    }]
			});
        }; 
      oTableInit.queryParams = function () {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 
            startDate: $("#start").val(),
            endDate: $("#end").val()
        };
        return temp;
       }; 

       return oTableInit;
     };
    
    
  
      
       //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD hh:mm:ss',
            min: '2018-01-01 23:59:59', //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: true,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: true,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
        
      
	   
		 $("#select").bind("click", function(){
		        var oTable = new TableInit();
		    oTable.Init(); 
		 });
		  
		 
    </script> 

</body>

</html>
